<template>
    <view class="news">
        <!-- 内容 -->
     <!--   <tabs
            :current="current"
            @change="handleChange"
            height="80"
			activeColor="#F7DA1C"
            bar-width="60"
			:show-bar="false"
            :barStyle="{ bottom: '0' }"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.name">
               
            </tab>
        </tabs> -->
		
		<view class="tag-warp">
			<view class="tag-item" :class="{act: Cid == i.id}"  @click="handleChange(i.id)" v-for="i in tabList" :key="i.id"  >
				<view>{{i.name}}</view>
				<view v-show="![0,5,6].includes(i.id) && i.num > 0">{{i.num}}</view>
			</view>
		</view>
		
		<view>
			<view v-if="isLogin" class="news-list pt-[20rpx]">
				<!-- :cid="item.id" :i="i" -->
			    <news-list  @ok="getNum" :cid="Cid" :index="current"></news-list>
			</view>
			<view  v-if="!isLogin" class="login-warp" @click="toLogin">
				<view class="r_btn_4">立即登录</view>
			</view>
		</view>
		
		
        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/order-list.vue'
import { getArticleCate ,getOrderNum} from '@/api/news'

import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)


// 1待发货 2待质检 3质检中 4洽谈中 5已成交 6已成交（部分退货）  7已退货
// 1待发货 2待质检 3质检中 4洽谈中 5已成交 6已成交（部分退货）  7已退货
const tabList = ref<any>([
	// {name:'全部',id:0},
	// {name:'待发货',id:1},
	// {name:'待质检',id:2},
	// {name:'质检中',id:3},
	// {name:'洽谈中',id:4},
	// {name:'已成交',id:5},
	// {name:'已退货',id:6},
])

const Cid = ref(0);

const fahuoShow = ref(false);
const OrderId = ref(0);


const current = ref<number>(0)


const fahuoEnv = (id:any) => {
	fahuoShow.value = true;
	OrderId.value = id;
}

const handleChange = (id) => {
	Cid.value = id;
	current.value += 1;
 //    console.log(index)
 //    current.value = Number(index)
	// Cid = i.id;current=current++
	
}

const toLogin = () => {
	uni.navigateTo({
		url:'/pages/login/login'
	})
}

const getNum = async () => {
  let res = 	await getOrderNum({});
  tabList.value = res;
}

onLoad((options) => {

    // getData()
})
</script>

<style lang="scss">
	.login-warp{
		padding: 0 30rpx;
		margin-top: calc(50vh - 100rpx);
	}
.news {
    &-list {
        height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
    }
}

.tag-warp{
	display: flex;
	background-color: #fff;
	padding: 30rpx;
	gap: 30rpx;
	flex-wrap: wrap;
	.tag-item{
		padding: 10rpx 30rpx;
		border: 1px solid #FF4907;
		color:#FF4907;
		border-radius: 10rpx;
		position: relative;
		view{
			&:nth-child(2){
				position: absolute;
				color: #fff;
				width: 30rpx;
				height: 30rpx;
				background-color: red;
				top: -15rpx;
				right: -15rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 30rpx;
			}
		}
		
	}	
	
	.act{
		background-color: #FF4907;
		color: #fff;
	}	

}	
</style>
